<template>
  <div class="mer-chant-header" id="product">
    <div class="down-header">
      <a href="" class="left router-link-exact-active router-link-active">
        <img :src="logo">
      </a>
      <div class="right">
        <el-dropdown @command="handleCommand" trigger="click">
                <span class="lang-select el-dropdown-selfdefine" style="display: flex;align-items: center;">
                  <img
                      :src="imgUrl"
                      alt="" style="width: 20px; border-radius: 50%;">
                  <img src="" class="down-img">
                </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="en">
                <div class="lang-item" data-lang="en">
                  <img
                      src="@/assets/images/language-en.png"
                      alt="en" style="width: 18px;">
                  <span>English</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="zh">
                <div class="lang-item" data-lang="zh">
                  <img src="@/assets/images/language-zh.png"
                       alt="zh-CN" style="width: 18px;" >
                  <span>中文简体</span>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <div class="content-text">
        <p class="title">
          {{ title }}
          <span ><br></span>
        </p><!---->
        <slot name="text"></slot>
      </div>
    </div>
    <img src="@/assets/images/policy-banner.jpg" class="bg-image">
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useI18n } from "vue-i18n";
import {ElDropdown, ElDropdownItem} from "element-plus";
const i18n = useI18n();
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
const logo = ref('')
logo.value = localStorage.getItem('logo')
const isOpening = ref(false)
const openLanguage = () => {
  isOpening.value = true
}
const chooseLanguage = (lang) => {
  i18n.locale.value = lang
  isOpening.value = false
}
const imgUrl = computed(() => {
  const lang = i18n.locale.value
  // 只能用相对路径，不能用@
  return new URL(`../../assets/images/language-${lang}.png`, import.meta.url).href
})
const handleCommand = (command) => {
  i18n.locale.value = command
  isOpening.value = false
}
</script>
<style scoped>
.mer-chant-header{
  font-size: 14px;
  background: 0 0;
  position: relative;
  min-height: 440px
}

.mer-chant-header .bg-image{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1
}

.mer-chant-header .down-header{
  height: 70px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 50%!important;
  transform: translateX(-50%);
  z-index: 10
}

.mer-chant-header .down-header .left{
  flex: 1;
  cursor: pointer
}

.mer-chant-header .down-header .left img{
  height: 43px
}

.mer-chant-header .down-header .right{
  display: flex;
  cursor: pointer
}

.mer-chant-header .down-header .right .cn-wrap{
  display: flex;
  align-items: center
}

.mer-chant-header .down-header .right .cn-wrap .cn-img{
  width: 20px;
  height: 20px;
  border-radius: 50%
}

.mer-chant-header .down-header .right .cn-wrap .down-img{
  margin-left: 5px
}

.mer-chant-header .content{
  width: 1200px;
  height: 420px;
  margin: 0 auto;
  position: absolute;
  padding-bottom: 100px;
  left: 50%!important;
  transform: translateX(-50%)
}

.mer-chant-header .content img{
  width: 100%
}

.mer-chant-header .content .content-text{
  width: 58%;
  position: absolute;
  top: 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start
}

.mer-chant-header .content .content-text p{
  width: 100%;
  font-size: 20px;
  color: #a6a6a6
}

.mer-chant-header .content .content-text .title{
  color: var(--color-main);
  font-size: 48px;
  margin-bottom: 4px;
  margin-top: 1.875rem
}

.el-dropdown-menu{
  max-height: 240px!important;
  overflow-y: auto!important
}
.el-dropdown-menu{
  max-height: 240px!important;
  overflow-y: auto!important
}

.rtl .cn-img,.rtl .el-dropdown-menu .lang-item>img{
  margin-left: .375rem;
  margin-right: 0
}
.lang-item{
  white-space: nowrap;
}
.lang-item img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: .3125rem;
}

@media screen and (max-width: 500px) {
  .mer-chant-header{
    min-width:100%!important;
    background: #212121;
    font-size: .875rem;
    position: relative;
    height: 23.75rem
  }

  .mer-chant-header .bg-image{
    position: absolute;
    width: 180%;
    height: 100%;
    z-index: 0;
    top: 0;
    right: 0;
    object-fit: cover
  }

  .mer-chant-header .down-header{
    width: 100%!important;
    position: relative;
    z-index: 2
  }

  .mer-chant-header .down-header .left{
    padding-left: .9375rem!important
  }

  .mer-chant-header .down-header .right{
    padding-right: .9375rem
  }

  .mer-chant-header .content{
    width: 100%!important;
    margin: 0 auto;
    position: relative;
    z-index: 4;
    padding: 0 .9375rem;
    height: auto
  }

  .mer-chant-header .content img{
    width: 100%
  }

  .mer-chant-header .content .content-text{
    width: 58%;
    position: absolute;
    top: 0;
    left: 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
  }

  .mer-chant-header .content .content-text p{
    width: 100%;
    font-size: .75rem;
    color: #a6a6a6
  }

  .mer-chant-header .content .content-text .title{
    color: var(--color-main);
    font-size: .875rem
  }
}
:deep(.el-dropdown-menu){
  margin-top: 12px;
}
:deep(.el-dropdown-menu__item){
  list-style: none;
  line-height: 36px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: 0;
}
.lang-item{
  padding-right: 50px;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
  background-color: #fff;
  color: #333;
}
.down-img{
  margin-left: 5px;
}
</style>